<template>
  <div class="case-center">
    <!-- 顶部搜索栏 -->
    <div class="search-header bg-white px-4 py-3 border-b">
      <div class="flex items-center space-x-3">
        <div class="flex-1 relative">
          <input 
            v-model="searchQuery" 
            type="text" 
            placeholder="搜索案件编号、客户姓名..."
            class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            @input="handleSearch"
          >
          <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
        </div>
        <button 
          @click="showFilter = !showFilter"
          class="p-2 text-gray-600 hover:text-blue-600"
        >
          <i class="fas fa-filter"></i>
        </button>
      </div>
      
      <!-- 筛选器 -->
      <div v-if="showFilter" class="mt-3 pt-3 border-t">
        <div class="flex flex-wrap gap-2">
          <button 
            v-for="status in statusFilters" 
            :key="status.value"
            @click="toggleFilter(status.value)"
            :class="[
              'px-3 py-1 rounded-full text-xs border transition-colors',
              activeFilters.includes(status.value) 
                ? 'bg-blue-600 text-white border-blue-600' 
                : 'bg-white text-gray-600 border-gray-300 hover:border-blue-600'
            ]"
          >
            {{ status.label }}
          </button>
        </div>
      </div>
    </div>

    <!-- 案件列表 -->
    <div class="case-list px-4 py-4 bg-gray-50">
      <div v-if="filteredCases.length === 0" class="text-center py-12">
        <i class="fas fa-folder-open text-4xl text-gray-300 mb-4"></i>
        <p class="text-gray-500">暂无案件数据</p>
      </div>
      
      <div v-else class="space-y-3">
        <div 
          v-for="case_ in filteredCases" 
          :key="case_.id" 
          class="bg-white rounded-xl p-4 shadow-sm"
          @click="viewCase(case_)"
        >
          <div class="flex items-start justify-between mb-3">
            <div class="flex-1">
              <h3 class="font-medium text-gray-800 text-sm">{{ case_.title }}</h3>
              <p class="text-xs text-gray-500 mt-1">编号：{{ case_.caseNumber }}</p>
            </div>
            <span :class="getStatusClass(case_.status)" class="text-xs px-2 py-1 rounded">
              {{ getStatusText(case_.status) }}
            </span>
          </div>
          
          <div class="flex items-center justify-between text-xs text-gray-500">
            <div class="flex items-center space-x-4">
              <span><i class="fas fa-user mr-1"></i>{{ case_.clientName }}</span>
              <span><i class="fas fa-calendar mr-1"></i>{{ formatDate(case_.createdAt) }}</span>
            </div>
            <i class="fas fa-chevron-right text-gray-400"></i>
          </div>
          
          <div v-if="case_.estimatedAmount" class="mt-2 pt-2 border-t border-gray-100">
            <span class="text-xs text-gray-500">预估金额：</span>
            <span class="text-xs font-medium text-green-600">¥{{ case_.estimatedAmount.toLocaleString() }}</span>
          </div>
        </div>
      </div>
      
      <!-- 加载更多 -->
      <div v-if="hasMore" class="text-center mt-6">
        <button 
          @click="loadMore"
          :disabled="loading"
          class="bg-blue-600 text-white px-6 py-2 rounded-lg text-sm disabled:opacity-50"
        >
          <i v-if="loading" class="fas fa-spinner fa-spin mr-2"></i>
          {{ loading ? '加载中...' : '加载更多' }}
        </button>
      </div>
    </div>

    <!-- 案件详情弹窗 -->
    <div v-if="selectedCase" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-end">
      <div class="bg-white w-full rounded-t-xl max-h-[80vh] overflow-y-auto">
        <div class="sticky top-0 bg-white px-4 py-3 border-b flex items-center justify-between">
          <h2 class="font-bold text-gray-800">案件详情</h2>
          <button @click="selectedCase = null" class="text-gray-500">
            <i class="fas fa-times"></i>
          </button>
        </div>
        
        <div class="p-4">
          <div class="space-y-4">
            <div>
              <h3 class="font-medium text-gray-800 mb-2">{{ selectedCase.title }}</h3>
              <div class="grid grid-cols-2 gap-3 text-sm">
                <div>
                  <span class="text-gray-500">案件编号：</span>
                  <span class="text-gray-800">{{ selectedCase.caseNumber }}</span>
                </div>
                <div>
                  <span class="text-gray-500">案件状态：</span>
                  <span :class="getStatusClass(selectedCase.status)" class="px-2 py-1 rounded text-xs">
                    {{ getStatusText(selectedCase.status) }}
                  </span>
                </div>
                <div>
                  <span class="text-gray-500">客户姓名：</span>
                  <span class="text-gray-800">{{ selectedCase.clientName }}</span>
                </div>
                <div>
                  <span class="text-gray-500">联系电话：</span>
                  <span class="text-gray-800">{{ selectedCase.clientPhone }}</span>
                </div>
                <div>
                  <span class="text-gray-500">创建时间：</span>
                  <span class="text-gray-800">{{ formatDate(selectedCase.createdAt) }}</span>
                </div>
                <div v-if="selectedCase.estimatedAmount">
                  <span class="text-gray-500">预估金额：</span>
                  <span class="text-green-600 font-medium">¥{{ selectedCase.estimatedAmount.toLocaleString() }}</span>
                </div>
              </div>
            </div>
            
            <!-- 案件整体进展 -->
            <div v-if="selectedCase.progress" class="bg-gradient-to-r from-blue-50 to-indigo-50 p-4 rounded-lg">
              <h4 class="font-medium text-gray-800 mb-3 flex items-center">
                <i class="fas fa-chart-line text-blue-600 mr-2"></i>
                案件整体进展
              </h4>
              
              <!-- 进度概览 -->
              <div class="mb-4">
                <div class="flex items-center justify-between text-sm mb-2">
                  <span class="text-gray-600">总体进度</span>
                  <span class="font-medium text-blue-600">{{ getProgressPercentage(selectedCase.progress) }}%</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2">
                  <div 
                    class="bg-gradient-to-r from-blue-500 to-indigo-500 h-2 rounded-full transition-all duration-300"
                    :style="{ width: getProgressPercentage(selectedCase.progress) + '%' }"
                  ></div>
                </div>
              </div>
              
              <!-- 进展时间线 -->
              <div class="space-y-3">
                <div 
                  v-for="(step, index) in selectedCase.progress.steps" 
                  :key="step.id"
                  class="flex items-start space-x-3"
                >
                  <!-- 状态图标 -->
                  <div class="flex-shrink-0 mt-1">
                    <div 
                      :class="[
                        'w-4 h-4 rounded-full border-2 flex items-center justify-center',
                        getStepStatusClass(step.status, index, selectedCase.progress.current)
                      ]"
                    >
                      <i 
                        v-if="step.status === 'completed'"
                        class="fas fa-check text-xs text-white"
                      ></i>
                      <i 
                        v-else-if="step.status === 'in-progress'"
                        class="fas fa-clock text-xs text-white"
                      ></i>
                      <i 
                        v-else-if="step.status === 'skipped'"
                        class="fas fa-forward text-xs text-gray-400"
                      ></i>
                    </div>
                    <!-- 连接线 -->
                    <div 
                      v-if="index < selectedCase.progress.steps.length - 1"
                      :class="[
                        'w-0.5 h-6 ml-1.5 mt-1',
                        step.status === 'completed' ? 'bg-green-300' : 'bg-gray-200'
                      ]"
                    ></div>
                  </div>
                  
                  <!-- 步骤内容 -->
                  <div class="flex-1 min-w-0">
                    <div class="flex items-center justify-between">
                      <p 
                        :class="[
                          'text-sm font-medium',
                          getStepTextClass(step.status, index, selectedCase.progress.current)
                        ]"
                      >
                        {{ step.name }}
                      </p>
                      <span 
                        v-if="step.date" 
                        class="text-xs text-gray-500 flex-shrink-0 ml-2"
                      >
                        {{ formatProgressDate(step.date) }}
                      </span>
                    </div>
                    <p 
                      :class="[
                        'text-xs mt-1',
                        getStepDescClass(step.status, index, selectedCase.progress.current)
                      ]"
                    >
                      {{ step.description }}
                    </p>
                  </div>
                </div>
              </div>
              
              <!-- 下一步提示 -->
              <div v-if="getNextStep(selectedCase.progress)" class="mt-4 p-3 bg-blue-100 rounded-lg">
                <div class="flex items-start space-x-2">
                  <i class="fas fa-lightbulb text-blue-600 mt-0.5"></i>
                  <div>
                    <p class="text-sm font-medium text-blue-800">下一步：{{ getNextStep(selectedCase.progress).name }}</p>
                    <p class="text-xs text-blue-600 mt-1">{{ getNextStep(selectedCase.progress).description }}</p>
                  </div>
                </div>
              </div>
            </div>

            <div v-if="selectedCase.notes">
              <h4 class="font-medium text-gray-800 mb-2">备注信息</h4>
              <p class="text-gray-600 text-sm bg-gray-50 p-3 rounded-lg">{{ selectedCase.notes }}</p>
            </div>
            
            <div class="flex space-x-3 pt-4">
              <button 
                @click="editCase(selectedCase)"
                class="flex-1 bg-blue-600 text-white py-2 rounded-lg text-sm"
              >
                <i class="fas fa-edit mr-2"></i>编辑案件
              </button>
              <button 
                @click="deleteCase(selectedCase)"
                class="px-4 bg-red-600 text-white py-2 rounded-lg text-sm"
              >
                <i class="fas fa-trash mr-2"></i>删除
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import dayjs from 'dayjs'

export default {
  name: 'CaseCenter',
  setup() {
    const searchQuery = ref('')
    const showFilter = ref(false)
    const activeFilters = ref([])
    const selectedCase = ref(null)
    const loading = ref(false)
    const hasMore = ref(true)
    
    const statusFilters = [
      { value: 'pending', label: '待审核' },
      { value: 'approved', label: '已通过' },
      { value: 'reviewing', label: '审核中' },
      { value: 'rejected', label: '已拒绝' },
      { value: 'completed', label: '已完成' }
    ]
    
    // 模拟交通事故案件数据
    const cases = ref([
      {
        id: 1,
        title: '机动车追尾事故人身损害赔偿',
        caseNumber: 'TA2024001',
        clientName: '王先生',
        clientPhone: '138****1234',
        status: 'pending',
        createdAt: '2024-01-18',
        estimatedAmount: 285000,
        notes: '十字路口追尾事故，对方全责，造成颈椎损伤和车辆全损，需要赔偿医疗费、误工费、车损费等。',
        progress: {
          current: 2,
          steps: [
            { id: 1, name: '案件创建', status: 'completed', date: '2024-01-18', description: '案件录入完成，等待审核' },
            { id: 2, name: '初步审核', status: 'completed', date: '2024-01-19', description: '市场部初步审核通过' },
            { id: 3, name: '律师分配', status: 'pending', date: null, description: '等待分配跟案律师' },
            { id: 4, name: '材料收集', status: 'pending', date: null, description: '收集相关证据材料' },
            { id: 5, name: '鉴定申请', status: 'pending', date: null, description: '申请伤残鉴定' },
            { id: 6, name: '调解谈判', status: 'pending', date: null, description: '与对方协商调解' },
            { id: 7, name: '诉讼准备', status: 'pending', date: null, description: '准备起诉材料' },
            { id: 8, name: '案件结案', status: 'pending', date: null, description: '案件处理完毕' }
          ]
        }
      },
      {
        id: 2,
        title: '行人过马路被撞伤残赔偿案',
        caseNumber: 'TA2024002',
        clientName: '李女士',
        clientPhone: '139****5678',
        status: 'approved',
        createdAt: '2024-01-17',
        estimatedAmount: 450000,
        notes: '行人在斑马线被机动车撞伤致残，伤残等级为八级，需要赔偿伤残赔偿金、护理费等。',
        progress: {
          current: 5,
          steps: [
            { id: 1, name: '案件创建', status: 'completed', date: '2024-01-17', description: '案件录入完成，等待审核' },
            { id: 2, name: '初步审核', status: 'completed', date: '2024-01-18', description: '市场部初步审核通过' },
            { id: 3, name: '律师分配', status: 'completed', date: '2024-01-19', description: '已分配专业律师张律师' },
            { id: 4, name: '材料收集', status: 'completed', date: '2024-01-20', description: '事故认定书、医疗资料已收集' },
            { id: 5, name: '鉴定申请', status: 'completed', date: '2024-01-22', description: '伤残鉴定已完成，八级伤残' },
            { id: 6, name: '调解谈判', status: 'in-progress', date: null, description: '正在与保险公司协商' },
            { id: 7, name: '诉讼准备', status: 'pending', date: null, description: '准备起诉材料' },
            { id: 8, name: '案件结案', status: 'pending', date: null, description: '案件处理完毕' }
          ]
        }
      },
      {
        id: 3,
        title: '电动车与汽车碰撞交通事故',
        caseNumber: 'TA2024003',
        clientName: '张先生',
        clientPhone: '137****9012',
        status: 'reviewing',
        createdAt: '2024-01-16',
        estimatedAmount: 120000,
        notes: '电动车闯红灯与汽车碰撞，责任认定争议，需要重新申请责任认定。',
        progress: {
          current: 3,
          steps: [
            { id: 1, name: '案件创建', status: 'completed', date: '2024-01-16', description: '案件录入完成，等待审核' },
            { id: 2, name: '初步审核', status: 'completed', date: '2024-01-17', description: '市场部初步审核通过' },
            { id: 3, name: '律师分配', status: 'completed', date: '2024-01-18', description: '已分配专业律师李律师' },
            { id: 4, name: '材料收集', status: 'in-progress', date: null, description: '正在申请重新责任认定' },
            { id: 5, name: '鉴定申请', status: 'pending', date: null, description: '申请伤残鉴定' },
            { id: 6, name: '调解谈判', status: 'pending', date: null, description: '与对方协商调解' },
            { id: 7, name: '诉讼准备', status: 'pending', date: null, description: '准备起诉材料' },
            { id: 8, name: '案件结案', status: 'pending', date: null, description: '案件处理完毕' }
          ]
        }
      },
      {
        id: 4,
        title: '酒驾肇事逃逸刑事附带民事',
        caseNumber: 'TA2024004',
        clientName: '陈女士',
        clientPhone: '136****3456',
        status: 'approved',
        createdAt: '2024-01-15',
        estimatedAmount: 680000,
        notes: '醉驾肇事致人重伤后逃逸，刑事案件已判决，现进行附带民事赔偿。',
        progress: {
          current: 6,
          steps: [
            { id: 1, name: '案件创建', status: 'completed', date: '2024-01-15', description: '案件录入完成，等待审核' },
            { id: 2, name: '初步审核', status: 'completed', date: '2024-01-16', description: '市场部初步审核通过' },
            { id: 3, name: '律师分配', status: 'completed', date: '2024-01-17', description: '已分配刑事附带民事专业律师' },
            { id: 4, name: '材料收集', status: 'completed', date: '2024-01-18', description: '刑事判决书、医疗资料已收集' },
            { id: 5, name: '鉴定申请', status: 'completed', date: '2024-01-20', description: '伤残鉴定、财产损失鉴定完成' },
            { id: 6, name: '调解谈判', status: 'completed', date: '2024-01-22', description: '与被告方达成赔偿协议' },
            { id: 7, name: '诉讼准备', status: 'in-progress', date: null, description: '准备强制执行申请' },
            { id: 8, name: '案件结案', status: 'pending', date: null, description: '赔偿款到账，案件结案' }
          ]
        }
      },
      {
        id: 5,
        title: '大货车侧翻压车事故',
        caseNumber: 'TA2024005',
        clientName: '刘先生',
        clientPhone: '135****7890',
        status: 'reviewing',
        createdAt: '2024-01-14',
        estimatedAmount: 950000,
        notes: '大货车转弯侧翻压到小轿车，造成严重人员伤亡，涉及超载责任认定。',
        progress: {
          current: 4,
          steps: [
            { id: 1, name: '案件创建', status: 'completed', date: '2024-01-14', description: '案件录入完成，等待审核' },
            { id: 2, name: '初步审核', status: 'completed', date: '2024-01-15', description: '市场部初步审核通过' },
            { id: 3, name: '律师分配', status: 'completed', date: '2024-01-16', description: '已分配重大交通事故专业律师' },
            { id: 4, name: '材料收集', status: 'completed', date: '2024-01-17', description: '正在申请超载检测报告' },
            { id: 5, name: '鉴定申请', status: 'in-progress', date: null, description: '等待车辆技术鉴定结果' },
            { id: 6, name: '调解谈判', status: 'pending', date: null, description: '与货车公司协商赔偿' },
            { id: 7, name: '诉讼准备', status: 'pending', date: null, description: '准备起诉材料' },
            { id: 8, name: '案件结案', status: 'pending', date: null, description: '案件处理完毕' }
          ]
        }
      },
      {
        id: 6,
        title: '停车场内车辆碰撞纠纷',
        caseNumber: 'TA2024006',
        clientName: '赵女士',
        clientPhone: '134****2468',
        status: 'completed',
        createdAt: '2024-01-13',
        estimatedAmount: 35000,
        notes: '停车场内倒车碰撞，责任认定明确，已达成调解协议。',
        progress: {
          current: 8,
          steps: [
            { id: 1, name: '案件创建', status: 'completed', date: '2024-01-13', description: '案件录入完成，等待审核' },
            { id: 2, name: '初步审核', status: 'completed', date: '2024-01-13', description: '市场部初步审核通过' },
            { id: 3, name: '律师分配', status: 'completed', date: '2024-01-14', description: '已分配专业律师王律师' },
            { id: 4, name: '材料收集', status: 'completed', date: '2024-01-15', description: '监控录像、车损评估完成' },
            { id: 5, name: '鉴定申请', status: 'completed', date: '2024-01-16', description: '车损鉴定完成' },
            { id: 6, name: '调解谈判', status: 'completed', date: '2024-01-18', description: '双方达成调解协议' },
            { id: 7, name: '诉讼准备', status: 'skipped', date: null, description: '调解成功，无需诉讼' },
            { id: 8, name: '案件结案', status: 'completed', date: '2024-01-19', description: '赔偿款已到账，案件结案' }
          ]
        }
      },
      {
        id: 7,
        title: '多车连环追尾事故',
        caseNumber: 'TA2024007',
        clientName: '孙先生',
        clientPhone: '133****1357',
        status: 'pending',
        createdAt: '2024-01-12',
        estimatedAmount: 380000,
        notes: '高速公路雾天多车连环追尾，责任复杂，涉及多方赔偿。',
        progress: {
          current: 1,
          steps: [
            { id: 1, name: '案件创建', status: 'completed', date: '2024-01-12', description: '案件录入完成，等待审核' },
            { id: 2, name: '初步审核', status: 'pending', date: null, description: '等待市场部审核' },
            { id: 3, name: '律师分配', status: 'pending', date: null, description: '等待分配跟案律师' },
            { id: 4, name: '材料收集', status: 'pending', date: null, description: '收集多方事故证据' },
            { id: 5, name: '鉴定申请', status: 'pending', date: null, description: '申请车辆损失鉴定' },
            { id: 6, name: '调解谈判', status: 'pending', date: null, description: '多方责任协商' },
            { id: 7, name: '诉讼准备', status: 'pending', date: null, description: '准备起诉材料' },
            { id: 8, name: '案件结案', status: 'pending', date: null, description: '案件处理完毕' }
          ]
        }
      },
      {
        id: 8,
        title: '非机动车道机动车撞人案',
        caseNumber: 'TA2024008',
        clientName: '马女士',
        clientPhone: '132****9876',
        status: 'rejected',
        createdAt: '2024-01-11',
        estimatedAmount: 0,
        notes: '证据不足，无法证明机动车存在违法行为，案件被拒绝受理。',
        progress: {
          current: 2,
          steps: [
            { id: 1, name: '案件创建', status: 'completed', date: '2024-01-11', description: '案件录入完成，等待审核' },
            { id: 2, name: '初步审核', status: 'completed', date: '2024-01-11', description: '审核后发现证据不足' },
            { id: 3, name: '律师分配', status: 'skipped', date: null, description: '案件被拒绝，无需分配律师' },
            { id: 4, name: '材料收集', status: 'skipped', date: null, description: '案件被拒绝' },
            { id: 5, name: '鉴定申请', status: 'skipped', date: null, description: '案件被拒绝' },
            { id: 6, name: '调解谈判', status: 'skipped', date: null, description: '案件被拒绝' },
            { id: 7, name: '诉讼准备', status: 'skipped', date: null, description: '案件被拒绝' },
            { id: 8, name: '案件结案', status: 'completed', date: '2024-01-11', description: '案件拒绝受理，已结案' }
          ]
        }
      }
    ])
    
    const filteredCases = computed(() => {
      let result = cases.value
      
      // 搜索过滤
      if (searchQuery.value) {
        const query = searchQuery.value.toLowerCase()
        result = result.filter(case_ => 
          case_.title.toLowerCase().includes(query) ||
          case_.caseNumber.toLowerCase().includes(query) ||
          case_.clientName.toLowerCase().includes(query)
        )
      }
      
      // 状态过滤
      if (activeFilters.value.length > 0) {
        result = result.filter(case_ => activeFilters.value.includes(case_.status))
      }
      
      return result
    })
    
    const handleSearch = () => {
      // 搜索逻辑
    }
    
    const toggleFilter = (status) => {
      const index = activeFilters.value.indexOf(status)
      if (index > -1) {
        activeFilters.value.splice(index, 1)
      } else {
        activeFilters.value.push(status)
      }
    }
    
    const viewCase = (case_) => {
      selectedCase.value = case_
    }
    
    const editCase = (case_) => {
      // 跳转到编辑页面
      alert(`编辑案件：${case_.title}`)
    }
    
    const deleteCase = (case_) => {
      if (confirm(`确定要删除案件"${case_.title}"吗？`)) {
        const index = cases.value.findIndex(c => c.id === case_.id)
        if (index > -1) {
          cases.value.splice(index, 1)
        }
        selectedCase.value = null
        alert('案件已删除')
      }
    }
    
    const loadMore = () => {
      loading.value = true
      setTimeout(() => {
        loading.value = false
        hasMore.value = false // 模拟没有更多数据
      }, 1000)
    }
    
    const formatDate = (date) => {
      return dayjs(date).format('MM-DD')
    }
    
    const getStatusClass = (status) => {
      const classes = {
        pending: 'bg-yellow-100 text-yellow-800',
        approved: 'bg-green-100 text-green-800',
        reviewing: 'bg-blue-100 text-blue-800',
        rejected: 'bg-red-100 text-red-800',
        completed: 'bg-gray-100 text-gray-800'
      }
      return classes[status] || 'bg-gray-100 text-gray-800'
    }
    
    const getStatusText = (status) => {
      const texts = {
        pending: '待审核',
        approved: '已通过',
        reviewing: '审核中',
        rejected: '已拒绝',
        completed: '已完成'
      }
      return texts[status] || '未知'
    }
    
    // 进展相关方法
    const getProgressPercentage = (progress) => {
      if (!progress || !progress.steps) return 0
      const completedSteps = progress.steps.filter(step => step.status === 'completed').length
      const totalSteps = progress.steps.length
      return Math.round((completedSteps / totalSteps) * 100)
    }
    
    const getStepStatusClass = (status, index, current) => {
      if (status === 'completed') {
        return 'bg-green-500 border-green-500'
      } else if (status === 'in-progress') {
        return 'bg-blue-500 border-blue-500'
      } else if (status === 'skipped') {
        return 'bg-gray-400 border-gray-400'
      } else if (index === current) {
        return 'bg-yellow-500 border-yellow-500'
      } else {
        return 'bg-gray-200 border-gray-300'
      }
    }
    
    const getStepTextClass = (status, index, current) => {
      if (status === 'completed') {
        return 'text-green-700'
      } else if (status === 'in-progress') {
        return 'text-blue-700'
      } else if (status === 'skipped') {
        return 'text-gray-500 line-through'
      } else if (index === current) {
        return 'text-yellow-700'
      } else {
        return 'text-gray-500'
      }
    }
    
    const getStepDescClass = (status, index, current) => {
      if (status === 'completed') {
        return 'text-green-600'
      } else if (status === 'in-progress') {
        return 'text-blue-600'
      } else if (status === 'skipped') {
        return 'text-gray-400 line-through'
      } else if (index === current) {
        return 'text-yellow-600'
      } else {
        return 'text-gray-400'
      }
    }
    
    const formatProgressDate = (date) => {
      return dayjs(date).format('MM-DD')
    }
    
    const getNextStep = (progress) => {
      if (!progress || !progress.steps) return null
      
      // 找到下一个待处理的步骤
      const nextStep = progress.steps.find(step => 
        step.status === 'pending' || step.status === 'in-progress'
      )
      
      return nextStep || null
    }
    
    return {
      searchQuery,
      showFilter,
      activeFilters,
      selectedCase,
      loading,
      hasMore,
      statusFilters,
      filteredCases,
      handleSearch,
      toggleFilter,
      viewCase,
      editCase,
      deleteCase,
      loadMore,
      formatDate,
      getStatusClass,
      getStatusText,
      getProgressPercentage,
      getStepStatusClass,
      getStepTextClass,
      getStepDescClass,
      formatProgressDate,
      getNextStep
    }
  }
}
</script>

<style scoped>
.case-center {
  background-color: #f8fafc;
  min-height: 100vh;
}
</style> 